import React, { useState, useEffect, CSSProperties } from 'react';
import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro';

const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

const InfiniteUlStyle = {
  height: '300px',
  width: '100%',
  padding: '0',
  overflowY: 'auto',
  overflowX: 'hidden',
};

const InfiniteLiStyle = {
  marginTop: '10px',
  fontSize: '14px',
  color: 'rgba(100, 100, 100, 1)',
  textAlign: 'center',
};

const Demo3 = () => {
  const [customList, setCustomList] = useState([]);
  const [customHasMore, setCustomHasMore] = useState(true);

  useEffect(() => {
    init();
  }, []);

  const init = () => {
    const initialList = Array.from({ length: 10 }, (_, i) => `${i}`);
    setCustomList(initialList);
  };

  const customLoadMore = async () => {
    await sleep(2000);
    const curLen = customList.length;
    const newItems = Array.from({ length: 10 }, (_, i) => `${curLen + i}`);
    setCustomList([...customList, ...newItems]);

    if (customList.length + newItems.length >= 30) {
      setCustomHasMore(false);
    }
  };

  return (
    <Cell>
      <ul id="customScroll" style={InfiniteUlStyle}>
        <InfiniteLoading
          target="customScroll"
          loadingText="loading"
          loadMoreText="没有啦～"
          hasMore={customHasMore}
          onLoadMore={customLoadMore}
        >
          {customList.map((item, index) => (
            <li key={index} style={InfiniteLiStyle}>
              {item}
            </li>
          ))}
        </InfiniteLoading>
      </ul>
    </Cell>
  );
};

export default Demo3;
